<template>
  <div class="lcds-root-container">
    <p class="seg-title">纯文本</p>
    <lc-rower>
      <span class="lc-label">文本内容</span>
    </lc-rower>
    <p class="seg-title">输入框</p>
    <lc-rower>
      <el-input class="lc-input" v-model="input" placeholder="请输入">
      </el-input>
    </lc-rower>
    <p class="seg-title">密码框</p>
    <lc-rower>
      <el-input
        class="lc-input"
        v-model="password"
        type="password"
        :clearable="false"
        placeholder="请输入"
        :show-password="true"
      ></el-input>
    </lc-rower>
    <p class="seg-title">文本域</p>
    <lc-rower>
      <lc-textarea
        v-model="textarea"
        :clearable="true"
        :disabled="false"
        :configs="textareaConfigs"
      ></lc-textarea>
    </lc-rower>
    <p class="seg-title">数字输入框</p>
    <lc-rower>
      <el-input-number
        class="lc-input-number"
        v-model="number1"
        :disabled="false"
        :controls="true"
        :precision="2"
        :step="0.1"
        :min="-100"
        :max="100"
        size="large"
        placeholder="请输入"
      >
        <template #prefix>
          <span>￥</span>
        </template>
      </el-input-number>
    </lc-rower>
    <lc-rower>
      <el-input-number
        class="lc-input-number"
        v-model="number2"
        :disabled="false"
        :controls="true"
        :precision="2"
        :step="0.1"
        :min="-100"
        :max="100"
        size="large"
        placeholder="请输入"
      >
        <template #suffix>
          <span>RMB</span>
        </template>
      </el-input-number>
    </lc-rower>
    <p class="seg-title">单选框</p>
    <lc-rower>
      <el-radio-group class="lc-radio-group" v-model="radio">
        <el-radio
          :border="false"
          v-for="option in radioOptions"
          :key="option.value"
          :label="option.value"
        >
          {{ option.label }}
        </el-radio>
      </el-radio-group>
    </lc-rower>
    <p class="seg-title">多选框</p>
    <lc-rower>
      <el-checkbox
        class="lc-checkbox"
        v-model="checkBox"
        :border="false"
        :checked="false"
      >
        选项
      </el-checkbox>
    </lc-rower>
    <p class="seg-title">文件上传</p>
    <lc-rower>
      <lc-file
        class="lc-file"
        v-model="file"
        :drag="false"
        :showFileList="true"
        method="get"
        :data="{}"
      >
        <el-button class="lc-button" type="primary"> 点击上传 </el-button>
      </lc-file>
    </lc-rower>
    <p class="seg-title">下拉选择</p>
    <lc-rower>
      <el-select
        class="lc-select"
        v-model="select"
        :clear-icon="CircleCloseFilled"
        popper-class="lc-select-popper"
        :clearable="true"
        placeholder="请选择"
      >
        <el-option
          v-for="option in selectOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        >
        </el-option
      ></el-select>
    </lc-rower>
    <p class="seg-title">时间选择</p>
    <lc-rower>
      <lc-time-picker
        v-model="timePicker"
        :configs="timePickerConfigs"
      ></lc-time-picker>
    </lc-rower>
    <p class="seg-title">日期选择</p>
    <lc-rower>
      <lc-date-picker
        ref="datePickerRef"
        v-model="datePicker"
        :configs="datePickerConfigs"
      >
      </lc-date-picker>
    </lc-rower>
    <p class="seg-title">日期时间选择</p>
    <lc-rower>
      <el-date-picker
        class="lc-date-time-picker"
        v-model="dateTimePicker"
        placeholder="请选择日期时间"
        type="datetime"
        format="YYYY-MM-DD HH:mm:ss"
        valueFormat="YYYY-MM-DD HH:mm:ss"
      >
      </el-date-picker>
    </lc-rower>
    <p class="seg-title">标签</p>
    <lc-rower>
      <lc-tag class="lc-tag" v-model="tag" :options="tagOptions"> </lc-tag>
    </lc-rower>
    <p class="seg-title">滑块</p>
    <lc-rower>
      <lc-slider class="lc-slider" v-model="slider"> </lc-slider>
    </lc-rower>
    <p class="seg-title">穿梭框</p>
    <div class="lc-transfer">
      <el-transfer
        v-model="transfer"
        class="lc-transfer"
        :data="transferData"
        :props="transferProps"
        :titles="transferTitles"
        :filterable="false"
      />
    </div>
    <p class="seg-title">开关</p>
    <lc-rower>
      <el-switch
        class="lc-switch"
        v-model="switch2"
        :style="{
          '--el-switch-on-color': '#409EFF',
          '--el-switch-off-color': '#C0CCDA',
        }"
      ></el-switch>
    </lc-rower>
    <p class="seg-title">状态</p>
    <lc-rower>
      <lc-status
        class="lc-status"
        v-model="status"
        :dict-config-list="statusDictConfigList"
      >
      </lc-status>
    </lc-rower>
    <p class="seg-title">多选框组</p>
    <lc-rower>
      <el-checkbox-group
        class="lc-checkbox-group"
        v-model="checkBoxGroup"
        size="default"
      >
        <el-checkbox
          v-for="option in checkBoxGroupOptions"
          :key="option.value"
          :label="option.value"
          :disabled="option.disabled"
          :checked="option.checked"
          :border="false"
        >
          {{ option.label }}
        </el-checkbox>
      </el-checkbox-group>
    </lc-rower>
    <p class="seg-title">评分</p>
    <lc-rower>
      <el-rate class="lc-rate" v-model="rate"></el-rate>
    </lc-rower>
    <p class="seg-title">级联选择器</p>
    <lc-rower>
      <el-cascader
        class="lc-cascader"
        v-model="cascader"
        :options="cascaderOptions"
        :props="{ multiple: false }"
      ></el-cascader>
    </lc-rower>
    <p class="seg-title">单选输入框</p>
    <lc-rower>
      <el-autocomplete
        class="lc-autocomplete"
        v-model="autocomplete"
        :fetch-suggestions="autocompleteQuerySearch"
        value-key="label"
        :triggerOnFocus="false"
      ></el-autocomplete>
    </lc-rower>
    <p class="seg-title">金额</p>
    <lc-rower>
      <lc-input-amount
        class="lc-input-amount"
        v-model="inputAmount"
        :maxDecimalDigits="2"
        :maxIntegerDigits="15"
        :clearable="false"
        placeholder="请输入"
      >
      </lc-input-amount>
    </lc-rower>
    <p class="seg-title">excel导出</p>
    <lc-rower>
      <lc-excel-export :data="excelExportData" label="导出">
        <lc-svg-icon
          class="lc-svg-icon"
          icon-class="materials_table_export"
        ></lc-svg-icon>
      </lc-excel-export>
    </lc-rower>
    <p class="seg-title">excel导入</p>
    <lc-rower>
      <lc-excel-import
        class="lc-excel-import"
        :connectors="excelImportConnectors"
        label="导入"
      >
        <lc-svg-icon
          class="lc-svg-icon"
          icon-class="materials_table_import"
        ></lc-svg-icon>
      </lc-excel-import>
    </lc-rower>
    <p class="seg-title">行政区划选择</p>
    <lc-rower>
      <lc-area-selector
        v-model="areaSelector"
        :disabled="false"
        separator="/"
        placeholder="请选择"
      ></lc-area-selector>
    </lc-rower>
  </div>
</template>

<script setup>
import { ref, unref } from "vue";

import { CircleCloseFilled } from "@element-plus/icons-vue";
defineOptions({
  name: "Bd9527",
});

const input = ref("");
const password = ref("");
const textarea = ref("");
const textareaConfigs = ref({
  maxlength: "200",
  minlength: "",
  rows: "3",
  autosize: false,
  showWordLimit: true,
  placeholder: "请输入内容",
});
const number1 = ref("");
const number2 = ref("");
const radio = ref("");
const radioOptions = ref([
  { label: "选项1", value: "value1" },
  { label: "选项2", value: "value2" },
  { label: "选项3", value: "value3" },
]);
const checkBox = ref("");
const file = ref([]);
const select = ref("");
const selectOptions = ref([]);
const timePicker = ref("");
const timePickerConfigs = ref({
  placeholder: "请选择时间",
  format: "HH:mm:ss",
  valueFormat: "",
  clearable: true,
});
const datePicker = ref("");
const datePickerConfigs = ref({
  placeholder: "请选择日期",
  type: "date",
  format: "YYYY-MM-DD",
  valueFormat: "YYYY-MM-DD",
  clearable: true,
});
const dateTimePicker = ref("");
const tag = ref("");
const tagOptions = ref([]);
const slider = ref(0);
const transfer = ref([]);
const transferData = ref([]);
const transferProps = ref({ key: "value", label: "label" });
const transferTitles = ref(["列表1", "列表2"]);
const switch2 = ref(false);
const status = ref("");
const statusDictConfigList = ref([]);
const checkBoxGroup = ref([]);
const checkBoxGroupOptions = ref([
  { label: "选项1", value: "value1" },
  { label: "选项2", value: "value2" },
  { label: "选项3", value: "value3" },
]);
const rate = ref(3);
const cascader = ref("");
const cascaderOptions = ref([]);
const autocomplete = ref("");
const autocompleteOptions = ref([
  { label: "选项1", value: "value1" },
  { label: "选项2", value: "value2" },
  { label: "选项3", value: "value3" },
]);
const inputAmount = ref("");
const excelExportData = ref({});
const excelImportConnectors = ref({});
const areaSelector = ref("");

const autocompleteQuerySearch = (queryString, callback) => {
  const results = queryString
    ? unref(autocompleteOptions).filter(
        (e) => e.label.indexOf(queryString) > -1,
      )
    : unref(autocompleteOptions);
  callback(results);
};
</script>
<style scoped>
.lcds-root-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
